<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/cart.css">
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<body>
<div class="app">
    <header>
        <div class="projectName">汽车轴承寿命预测平台</div>
        <el-input placeholder="搜索" clearable style="width: 10vw;margin: 10px"></el-input>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1" onclick=""><a href="uindex.jsp">首页</a></el-menu-item>
            <el-menu-item index="2"><a href="ShoppingServlet">商城</a></el-menu-item>
            <el-menu-item index="3"><a href="OrderListServlet">购物车</a></el-menu-item>
            <el-menu-item index="4"><a href="mine.jsp" target="_blank">我的</a></el-menu-item>
        </el-menu>
    </header>
    <div class="cartList">
        <c:forEach var="item" items="${orderItemWithBearingList}">
            <c:choose>
                <c:when test="${orderItemWithBearingList == null}">
                    <img src="./img/b1.jpg" alt="未添加购物车商品">
                    <div>暂未添加购物车</div>
                </c:when>
                <c:otherwise>
                    <div class="item">
                        <img src="${item.imgSrc}" alt="商品图片"></img>
                        <div class="info">
                            <div class="title">${item.bearingType}</div>
                            <div class="price">价格：￥<span>${item.bearingPrice}</span>元</div>
                            <div class="num">数量：
                                <button class="del">-</button>
                                <span class="num">${item.orderItem.amount}</span>
                                <button>+</button>
                            </div>
                            <div class="total">合计:<span>￥${item.orderItem.price}</span>
                                <button id="btn_${item.orderItem.id}" onclick="deleteitem(${item.orderItem.id})">删除(所有)</button>
                                <!-- 注意：为了避免ID重复，我为删除按钮的ID添加了后缀 -->
                            </div>
                        </div>
                    </div>
                </c:otherwise>
            </c:choose>
        </c:forEach>
    </div>
    <div class="totals">合计:<span>${order.total}</span>
        <button onclick="ti()">提交订单</button>
    </div>
</div>
</body>
<script>
    function deleteitem(itemId) {
        window.location.href = 'OrderItemDeleteServlet?itemId=' + itemId;
        console.log(itemId + "  itemId的值 ")
    }

    function ti() {
        window.location.href = 'OrderUpdateStatusServlet'
    }
</script>
<script>
    new Vue({
        el: '.app',
        data() {
            return {
                activeIndex: '3',
                activeIndex2: '3'
            }
        }, methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>

</html>